<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>字典管理</title>
</head>
<body>
<!--查询条件框-->
<form class="layui-form" action="" style="padding-top: 20px;" id="conForm">
    <div class="layui-row">
        <div class="layui-col-xs2">
            <div class="layui-form-item">
                <label class="layui-form-label">字典枚举</label>
                <div class="layui-input-block">
                    <input type="text" id="qry_dictCode" name="qry_dictCode"
                           class="layui-input" autocomplete="off"/>
                    <i class="i-icon delete-icon"></i>
                </div>
            </div>
        </div>
        <div class="layui-col-xs2">
            <div class="layui-form-item">
                <label class="layui-form-label">字典编码</label>
                <div class="layui-input-block">
                    <input type="text" id="qry_dictName" name="qry_dictName"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs2">
            <div class="layui-form-item">
                <label class="layui-form-label">字典描述</label>
                <div class="layui-input-block">
                    <input type="text" id="qry_dictDesc" name="qry_dictDesc"
                           class="layui-input" autocomplete="off">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-primary" lay-submit="" id="qryBtn"><i
                            class="layui-icon">&#xe615;</i>查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-warm"><i class="layui-icon">&#xe669;</i>重置条件
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" lay-submit="" id="addBtn"><i
                            class="layui-icon">&#xe624;</i>新增
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" lay-submit="" id="updBtn"><i
                            class="layui-icon">&#xe642;</i>修改
                    </button>
                    <button type="button" class="layui-btn layui-btn-danger" lay-submit="" id="delBtn"><i
                            class="layui-icon">&#xe640;</i> 删除
                    </button>
                    <button type="button" class="layui-btn layui-btn-normal" lay-submit="" id="downloadBtn"><i
                            class="layui-icon">&#xe67d;</i> 导出
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<!--列表-->
<table class="layui-hide" id="myTable"></table>

<!-- 编辑框 -->
<form class="layui-form" action="" id="editForm" style="display: none" lay-filter='editForm'>
    <div class="layui-row" style="margin-top: 15px;margin-bottom: 15px;">
        <input type="hidden" id="dictId" name="dictId"/>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">枚举</label>
                <div class="layui-input-inline">
                    <input type="text" id="dictCode" name="dictCode" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">编码</label>
                <div class="layui-input-inline">
                    <input type="text" id="dictName" name="dictName" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">值</label>
                <div class="layui-input-inline">
                    <input type="text" id="dictValue" name="dictValue" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-inline">
                    <input type="text" id="dictDesc" name="dictDesc" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                    <input type="number" id="dictSort" name="dictSort" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
    </div>
</form>


<!-- 你的 HTML 代码 -->
<script>
    layui.use(['layer', 'form', 'jquery', 'util', 'shopx', 'pub', 'http'], function () {
        var layer = layui.layer
            , form = layui.form
            , table = layui.table
            , util = layui.util
            , http = layui.http
            , shopx = layui.shopx
            , pub = layui.pub
            , $ = layui.$;
        var hmac = shopx.signRequest();

        //获取查询条件
        var qryModel = pub.getFormObject('conForm', 'qry_');
        qryModel['isPage'] = "1";
        qryModel['order'] = " update_time desc ";

        //表格
        var objTable = table.render({
            elem: '#myTable'
            , url: serverPath + '/sysDict/queryPageList'
            , headers: {hmac: hmac}
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , toolbar: '#tooolbarDemo'
            , contentType: 'application/json'
            , method: "post"
            , where: qryModel
            , parseData: function (res) {
                return {
                    "code": res.statusCode,
                    "msg": res.statusDesc, //解析提示文本
                    "count": res.rspData == null ? 0 : res.rspData.iTotalDisplayRecords, //解析数据长度
                    "data": res.rspData == null ? "" : res.rspData.data //解析数据列表
                }
            },
            request: {
                pageName: "pageStart",
                limitName: "pageLength"
            },
            respone: {
                statusName: "code",
                statusCode: '00000'
            },
            cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'dictId', title: '编号', fixed: 'left'}
                , {field: 'dictCode', title: '枚举', sort: true}
                , {field: 'dictName', title: '编码'}
                , {field: 'dictValue', title: '值', edit: 'text',}
                , {field: 'dictDesc', title: '描述', edit: 'text',}
                , {field: 'dictSort', title: '排序', edit: 'text', sort: true}
                , {field: 'createTime', title: '创建时间', sort: true}
                , {field: 'updateTime', title: '修改时间', sort: true}
            ]]
            , page: true
            , limits: [10, 20, 50, 100]
            , limit: 10
            , done: function (res, curr, count) {
                if (res.code != ERROR_CODE['SUCCESS']) {
                    if (res.code == ERROR_CODE['TOKEN_INVALIDATE']
                        || res.code == ERROR_CODE['TOKEN_ERROR']) {
                        // 会话失效
                        // location.href = localPath + "/login.html?msg=会话失效了，请您重新登录";
                        localStorage.clear();
                        location.href = "./login.html";
                        return;
                    } else {
                        layer.msg(res.msg);
                        return;
                    }
                } else {
                    //成功
                    return;
                }
            }
            , exportDataUrl: ""
            , exportMethod: "post"
            , exportAction: function (table, tableIns, config, exportType) {
            }
        });

        //排序
        table.on('sort(myTable)', function (obj) {
            // console.info(JSON.stringify(obj));
            qryModel = pub.getFormObject('conForm', 'qry_');
            qryModel['isPage'] = "1";
            qryModel['order'] = pub.covertHump(obj.field + ' ' + obj.type);
            // console.info(JSON.stringify(qryModel));
            table.reload('myTable', {
                initSort: obj,
                page: {curr: 0},
                where: qryModel
            })
        });

        //查询
        $("#qryBtn").click(function () {
            qryModel = pub.getFormObject('conForm', 'qry_');
            qryModel['isPage'] = "1";
            qryModel['order'] = " update_time desc ";
            table.reload('myTable', {
                page: {curr: 0},
                where: qryModel
            })
        });

        //新增
        $("#addBtn").click(function () {
            // var edithtml = "<form class='layui-form' action='' id='editForm'  lay-filter='editForm'>\n" +
            //     "    <div class='layui-row' style='margin-top: 15px;margin-bottom: 15px;'>\n" +
            //     "        <input type='hidden' id='dictId' name='dictId'/>\n" +
            //     "        <div class='layui-col-xs6'>\n" +
            //     "            <div class='layui-form-item'>\n" +
            //     "                <label class='layui-form-label'>枚举</label>\n" +
            //     "                <div class='layui-input-inline'>\n" +
            //     "                    <input type='text' id='dictCode' name='dictCode' lay-verify='required' autocomplete='off'\n" +
            //     "                           class='layui-input'>\n" +
            //     "                </div>\n" +
            //     "            </div>\n" +
            //     "        </div>\n" +
            //     "        <div class='layui-col-xs6'>\n" +
            //     "            <div class='layui-form-item'>\n" +
            //     "                <label class='layui-form-label'>编码</label>\n" +
            //     "                <div class='layui-input-inline'>\n" +
            //     "                    <input type='text' id='dictName' name='dictName' lay-verify='required' autocomplete='off'\n" +
            //     "                           class='layui-input'>\n" +
            //     "                </div>\n" +
            //     "            </div>\n" +
            //     "        </div>\n" +
            //     "        <div class='layui-col-xs6'>\n" +
            //     "            <div class='layui-form-item'>\n" +
            //     "                <label class='layui-form-label'>值</label>\n" +
            //     "                <div class='layui-input-inline'>\n" +
            //     "                    <input type='text' id='dictValue' name='dictValue' lay-verify='required' autocomplete='off'\n" +
            //     "                           class='layui-input'>\n" +
            //     "                </div>\n" +
            //     "            </div>\n" +
            //     "        </div>\n" +
            //     "        <div class='layui-col-xs6'>\n" +
            //     "            <div class='layui-form-item'>\n" +
            //     "                <label class='layui-form-label'>描述</label>\n" +
            //     "                <div class='layui-input-inline'>\n" +
            //     "                    <input type='text' id='dictDesc' name='dictDesc' autocomplete='off'\n" +
            //     "                           class='layui-input'>\n" +
            //     "                </div>\n" +
            //     "            </div>\n" +
            //     "        </div>\n" +
            //     "        <div class='layui-col-xs6'>\n" +
            //     "            <div class='layui-form-item'>\n" +
            //     "                <label class='layui-form-label'>排序</label>\n" +
            //     "                <div class='layui-input-inline'>\n" +
            //     "                    <input type='number' id='dictSort' name='dictSort' lay-verify='required' autocomplete='off'\n" +
            //     "                           class='layui-input'>\n" +
            //     "                </div>\n" +
            //     "            </div>\n" +
            //     "        </div>\n" +
            //     "    </div>\n" +
            //     "</form>";
            var edithtml = $("#editForm").html();
            layer.open({
                type: 1,
                title: '测试',
                content: edithtml,
                shade: false,
                minStack: true,
                area: ['60%', '60%'],
                maxmin: true,
                btn: ['确认', '关闭'],
                id: 'editPage',
                yes: function (index, layero) {
                    form.on('submit(addSubmit)', function (data) {
                        //提交表单
                        // console.info(JSON.stringify(data.field));
                        http.postRequest("/sysDict/insertOne", 'POST', data.field, function suc(data) {
                            qryModel = pub.getFormObject('conForm', 'qry_');
                            qryModel['isPage'] = "1";
                            qryModel['order'] = " update_time desc ";
                            table.reload('myTable', {
                                page: {curr: 0},
                                where: qryModel
                            })
                            layer.close(index);
                        }, null, false, true);
                    });
                },
                btn2: function () {
                    layer.closeAll();
                },
                success: function (layero, index) {
                    //弹框渲染
                    // $("#userName").val(111);
                    // 添加form标识
                    layero.addClass('layui-form');
                    // 将保存按钮改变成提交按钮
                    layero.find('.layui-layer-btn0').attr({
                        'lay-filter': 'addSubmit',
                        'lay-submit': ''
                    });
                    form.render();
                }
            })
            // pub.clearForm("editForm");
            // layer.open({
            //     title: '新增',
            //     type: 1,
            //     skin: 'layui-layer-border',
            //     area: ['70%', '70%'],
            //     // content: $('#editForm'),
            //     content: $('#editForm'),
            //     maxmin: true,
            //     shade: false,
            //     minStack: true,
            //     id: 'editPage',
            //     btn: ['确认', '关闭'],
            //     yes: function (index, layero) {
            //         form.on('submit(addSubmit)', function (data) {
            //             //提交表单
            //             // console.info(JSON.stringify(data.field));
            //             http.postRequest("/sysDict/insertOne", 'POST', data.field, function suc(data) {
            //                 qryModel = pub.getFormObject('conForm', 'qry_');
            //                 qryModel['isPage'] = "1";
            //                 qryModel['order'] = " update_time desc ";
            //                 table.reload('myTable', {
            //                     page: {curr: 0},
            //                     where: qryModel
            //                 })
            //                 layer.close(index);
            //             }, null, false, true);
            //         });
            //     },
            //     btn2: function () {
            //         layer.closeAll();
            //     },
            //     success: function (layero, index) {
            //         //弹框渲染
            //         // $("#userName").val(111);
            //         // 添加form标识
            //         layero.addClass('layui-form');
            //         // 将保存按钮改变成提交按钮
            //         layero.find('.layui-layer-btn0').attr({
            //             'lay-filter': 'addSubmit',
            //             'lay-submit': ''
            //         });
            //         form.render();
            //     }
            // });
        });

        //修改
        $("#updBtn").click(function () {
            var selectRows = layui.table.checkStatus('myTable').data;
            if (selectRows.length != 1) {
                layer.msg("请选择一条数据进行编辑");
                return false;
            }
            var model = {
                dictId: selectRows[0].dictId
            }
            http.postRequest("/sysDict/queryOneByPrimaryKey", 'POST', model, function suc(data) {
                pub.clearForm("editForm");
                form.val("editForm", data.rspData);

                var edithtml = $("#editForm").html();
                layer.open({
                    title: '编辑',
                    type: 1,
                    skin: 'layui-layer-border',
                    area: ['1200px', '680px'],
                    content: edithtml,
                    maxmin: true,
                    shade: false,
                    minStack: true,
                    id: 'editPage',
                    btn: ['确认', '关闭'],
                    yes: function (index, layero) {
                        var idx = index;
                        form.on('submit(addSubmit)', function (data) {
                            //提交表单
                            // console.info(JSON.stringify(data.field));
                            http.postRequest("/sysDict/updateOne", 'POST', data.field, function suc(data) {
                                layer.close(idx);
                                qryModel = pub.getFormObject('conForm', 'qry_');
                                qryModel['isPage'] = "1";
                                qryModel['order'] = " update_time desc ";
                                var curr = $(".layui-laypage-em").next().html();
                                var limit = objTable.config.page.limit;
                                var curr2 = 0;
                                if (curr > 1) {
                                    curr2 = (curr - 1) * limit;
                                } else {
                                    curr2 = 0;
                                }
                                table.reload('myTable', {
                                    page: {curr: curr2},
                                    where: qryModel
                                }, null, null, 1)
                            }, null, false, true);
                        });
                    },
                    btn2: function () {
                        layer.closeAll();
                    },
                    success: function (layero, index) {
                        //弹框渲染
                        // $("#userName").val(111);
                        // 添加form标识
                        layero.addClass('layui-form');
                        // 将保存按钮改变成提交按钮
                        layero.find('.layui-layer-btn0').attr({
                            'lay-filter': 'addSubmit',
                            'lay-submit': ''
                        });
                        form.render();
                    }
                });
            }, null, false, false);
        });

        //删除
        $("#delBtn").click(function () {
            var selectRows = layui.table.checkStatus('myTable').data;
            if (selectRows.length <= 0) {
                layer.msg('请至少选择一条记录');
                return;
            }
            layer.confirm('确认删除选中记录吗？', {
                btn: ['确定', '取消']
            }, function (index) {
                http.postRequest("/sysDict/deleteBatch", 'POST', selectRows, function suc(data) {
                    layer.close(index);
                    qryModel = pub.getFormObject('conForm', 'qry_');
                    qryModel['isPage'] = "1";
                    qryModel['order'] = " update_time desc ";
                    table.reload('myTable', {
                        page: {curr: 0},
                        where: qryModel
                    })
                });
            }, function () {
            });
        });

        //导出
        $("#downloadBtn").click(function () {
            qryModel = pub.getFormObject('conForm', 'qry_');
            qryModel['order'] = " update_time desc ";
            var urlParams = $.param(qryModel);
            var hmac = shopx.signRequest();
            $("#conForm").attr("method", "post");
            console.info(serverPath + 'sysDict/download?hmac=' + encodeURI(hmac).replace(/\+/g, '%2B') + "&" + urlParams);
            $("#conForm").attr("action", serverPath + 'sysDict/download?hmac=' + encodeURI(hmac).replace(/\+/g, '%2B') + "&" + urlParams);
            $("#conForm").submit();
        });

        //监听行数据变化
        table.on('edit(myTable)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            var model = {
                dictId: data.dictId
            }
            model[field] = util.escape(value);
            http.postRequest("/sysDict/updateOne", 'POST', model, function suc(data) {
                layer.close(idx);
                qryModel = pub.getFormObject('conForm', 'qry_');
                qryModel['isPage'] = "1";
                qryModel['order'] = " update_time desc ";
                var curr = $(".layui-laypage-em").next().html();
                var limit = objTable.config.page.limit;
                var curr2 = 0;
                if (curr > 1) {
                    curr2 = (curr - 1) * limit;
                } else {
                    curr2 = 0;
                }
                table.reload('myTable', {
                    page: {curr: curr2},
                    where: qryModel
                }, null, null, 1)
            }, null, false, true);
        });


    });

</script>
</body>
</html>